Google Maps API ব্যবহার করে আপনি Custom Shapes (কাস্টম আকার) এবং Dynamic Paths (ডাইনামিক রুট) তৈরি করতে পারেন। কাস্টম শেপ এবং ডাইনামিক পাথগুলি মানচিত্রে বিশেষ আকৃতি (যেমন, পলিগন, পাথ) বা রুট প্রদর্শন করতে ব্যবহৃত হয়, যা আপনার অ্যাপ্লিকেশনের জন্য আরও কার্যকরী ও ইন্টারঅ্যাকটিভ মানচিত্র তৈরি করে।
Custom Shape তৈরি করা
গুগল ম্যাপস API-তে Custom Shapes তৈরির জন্য সাধারণত পলিগন (Polygon) বা লাইন (Polyline) ব্যবহার করা হয়। এই শেপগুলির মাধ্যমে আপনি নির্দিষ্ট এলাকার সীমা বা একটি রুটকে মানচিত্রে প্রদর্শন করতে পারেন।
Custom Polygon তৈরি করা
একটি কাস্টম পলিগন তৈরি করতে, আমরা Google Maps API এর Polygon অবজেক্ট ব্যবহার করতে পারি। এটি একটি আর্দ্ধবৃত্ত আকারে স্থান বা এলাকা চিহ্নিত করতে সাহায্য করে।
কোড উদাহরণ:
<!DOCTYPE html>
<html>
<head>
<title>Custom Shape: Polygon Example</title>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>
<style>
#map {
height: 500px;
width: 100%;
}
</style>
</head>
<body>
<h3>Custom Shape: Polygon</h3>
<div id="map"></div>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: {lat: 23.8103, lng: 90.4125}, // ঢাকার কেন্দ্র
});
// Polygon এর পয়েন্টসমূহ
var polygonCoords = [
{lat: 23.8103, lng: 90.4125}, // ঢাকা
{lat: 23.8150, lng: 90.4225},
{lat: 23.8200, lng: 90.4300},
{lat: 23.8103, lng: 90.4400}
];
// Polygon তৈরি করা
var polygon = new google.maps.Polygon({
paths: polygonCoords,
strokeColor: '#FF0000', // সীমানা রঙ
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000', // পূর্ণ রঙ
fillOpacity: 0.35
});
polygon.setMap(map); // মানচিত্রে পলিগন সেট করা
}
</script>
</body>
</html>
কোডের ব্যাখ্যা:
- polygonCoords: এই অ্যারে-তে পলিগনের কোণগুলোর latitude এবং longitude দেওয়া হয়েছে।
- Polygon Object:
google.maps.Polygonব্যবহার করে পলিগন তৈরি করা হয়েছে। - setMap(): এটি পলিগনটি মানচিত্রে প্রদর্শন করার জন্য ব্যবহৃত হয়।
Dynamic Paths তৈরি করা
গুগল ম্যাপস API ব্যবহার করে আপনি ডাইনামিক পাথ (dynamic paths) বা রুট তৈরি করতে পারেন, যেখানে মানচিত্রে চলমান লাইনের মাধ্যমে যাত্রার পথ দেখানো হয়। এটি সাধারণত Polyline ব্যবহার করে করা হয়।
কোড উদাহরণ:
<!DOCTYPE html>
<html>
<head>
<title>Dynamic Path: Polyline Example</title>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>
<style>
#map {
height: 500px;
width: 100%;
}
</style>
</head>
<body>
<h3>Dynamic Path: Polyline</h3>
<div id="map"></div>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: {lat: 23.8103, lng: 90.4125}, // ঢাকার কেন্দ্র
});
// Polyline এর পয়েন্টসমূহ
var flightPath = new google.maps.Polyline({
path: [
{lat: 23.8103, lng: 90.4125}, // ঢাকা
{lat: 23.8150, lng: 90.4225},
{lat: 23.8200, lng: 90.4300},
{lat: 23.8103, lng: 90.4400} // শেষ পয়েন্ট
],
geodesic: true, // পৃথিবীর বক্রতা অনুযায়ী লাইন
strokeColor: '#0000FF', // পাথের রঙ
strokeOpacity: 1.0,
strokeWeight: 2
});
flightPath.setMap(map); // মানচিত্রে পাথ সেট করা
}
</script>
</body>
</html>
কোডের ব্যাখ্যা:
- Polyline Object:
google.maps.Polylineব্যবহার করে পাথ তৈরি করা হয়েছে, যা সরল রেখা (line) হিসেবে বিভিন্ন পয়েন্টের মধ্যে পথ চিহ্নিত করে। - path: এই অ্যারে-তে পাথের পয়েন্টের latitude এবং longitude দেওয়া হয়েছে।
- setMap(): এটি পাথটি মানচিত্রে প্রদর্শন করার জন্য ব্যবহৃত হয়।
সারাংশ
এটি ছিল Google Maps API ব্যবহার করে Custom Shapes (পলিগন) এবং Dynamic Paths (পলিলাইন) তৈরি করার প্রাথমিক গাইড। আপনি এই শেপ এবং পাথগুলি মানচিত্রে বিশেষ এলাকার সীমানা বা চলমান রুট প্রদর্শন করতে ব্যবহার করতে পারেন। এটি বিশেষ করে যাত্রার রুট, এলাকা চিহ্নিতকরণ, এবং ডাইনামিক তথ্য প্রদর্শনের জন্য কার্যকরী হতে পারে।
Read more
